<template>
  <div class="ld-wrap">
    <div class="ld-one">
      <img class="ld-one-img" :src="report.mainUrl" alt="">
      <div class="ld-one-txt">
        <div class="ld-one-txt-title">直播主题: {{report.title}}</div>
        <div class="ld-one-txt-time">时间: <span>{{report.startTime}}</span><span>{{report.endTime}}</span></div>
        <div class="ld-one-txt-platform">
          <p class="name">平台: {{report.platformName}}</p>
          <img class="icon" :src="report.platformIcon">
        </div>
        <div class="ld-one-txt-name">主播: {{report.anchorName}}</div>
      </div>
    </div>
    <div class="ld-two">
      <div class="ld-title">直播数据</div>
      <div class="ld-two-list">
        <div class="ld-two-item">
          <img class="ld-two-item-icon" src="../assets/images/rep-icon5.png" alt="">
          <p class="ld-item-txt">直播时长</p>
          <p class="ld-item-time">{{report.holdTime}}</p> 
        </div>
        <div class="ld-two-item">
          <img class="ld-two-item-icon" src="../assets/images/rep-icon6.png" alt="">
          <p class="ld-item-txt">粉丝数</p>
          <p class="ld-item-time">{{report.fans}}</p> 
        </div>
        <div class="ld-two-item">
          <img class="ld-two-item-icon" src="../assets/images/rep-icon1.png" alt="">
          <p class="ld-item-txt">最高在线人数</p>
          <p class="ld-item-time">{{report.highOnlineNum}}</p> 
        </div>
        <div class="ld-two-item">
          <img class="ld-two-item-icon" src="../assets/images/rep-icon2.png" alt="">
          <p class="ld-item-txt">累计观看人数</p>
          <p class="ld-item-time">{{report.viewNum}}</p> 
        </div>
        <div class="ld-two-item">
          <img class="ld-two-item-icon" src="../assets/images/rep-icon3.png" alt="">
          <p class="ld-item-txt">订单数</p>
          <p class="ld-item-time">{{report.orderNum}}</p> 
        </div>
        <div class="ld-two-item">
          <img class="ld-two-item-icon" src="../assets/images/rep-icon4.png" alt="">
          <p class="ld-item-txt">订单转化率</p>
          <p class="ld-item-time">{{report.orderConvertRate}}%</p> 
        </div>
      </div>
    </div>
    <div class="ld-three">
      <div class="ld-title">直播内容</div>
      <div class="ld-list">
        <p v-html="content"></p>
        <!-- <p>商品名称 纸巾</p>
        <p>价格 1元包邮</p>
        <p>享受人群 京东新用户</p>
        <p>直播内容 超低客单引流，围绕1元包邮商品，进行活动及用户下单流程操作说明</p> -->
      </div>
    </div>
    <div class="ld-four">
      <div class="ld-title">亮点总结</div>
      <div class="ld-list">
        <p v-html="brightPoint"></p>
        <!-- <p>采用发红包等形式活跃气氛</p> -->
      </div>
    </div>
    <div class="ld-five">
      <div class="ld-title">改进总结</div>
      <div class="ld-list">
        <p v-html="improve"></p>
      </div>
    </div>
    <div class="ld-six">
      <div class="ld-title">直播截图</div>
      <div class="ld-img-list" >
        <div class="ld-img-box" v-for="(item,index) in livePicture" :key="index">
          <img :src="item" alt="加载中">
        </div>
        <!-- <img :src="http://img3.imgtn.bdimg.com/it/u=3125819117,3319577282&fm=26&gp=0.jpg" alt=""> -->
        <!-- <img src="http://img3.imgtn.bdimg.com/it/u=3125819117,3319577282&fm=26&gp=0.jpg" alt="">
        <img src="http://img3.imgtn.bdimg.com/it/u=3125819117,3319577282&fm=26&gp=0.jpg" alt="">
        <img src="http://img3.imgtn.bdimg.com/it/u=3125819117,3319577282&fm=26&gp=0.jpg" alt="">
        <img src="http://img3.imgtn.bdimg.com/it/u=3125819117,3319577282&fm=26&gp=0.jpg" alt="">
        <img src="http://img3.imgtn.bdimg.com/it/u=3125819117,3319577282&fm=26&gp=0.jpg" alt="">
        <img src="http://img3.imgtn.bdimg.com/it/u=3125819117,3319577282&fm=26&gp=0.jpg" alt="">
        <img src="http://img3.imgtn.bdimg.com/it/u=3125819117,3319577282&fm=26&gp=0.jpg" alt=""> -->
      </div>
    </div>
  </div>
</template>
<script>
export default {
  async fetch({store}) {
    // await store.commit('setInterIndex', 0)
  },
  layout: 'internalouts',
  mounted() {
    // this.initKline()
  },
  components: {
  },
  computed:{
    content(){
      return this.report.content ? this.report.content.replace(/\n/g,"<br>"):''
    },
    brightPoint(){
      return this.report.brightPoint ? this.report.brightPoint.replace(/\n/g,"<br>"):''
    },
    improve(){
      return this.report.improve ? this.report.improve.replace(/\n/g,"<br>"):''
    }
  },
  data() {
    return {
      report:{}, //结案报告数据
      livePicture:[], //结案报告数据
    }
  },
  methods: {
    caseResultDetail(){ //结案报告详情
      let params ={
        id:this.$route.query.id,
      }
      this.$axios.$post('caseResultDetail',params).then(res => {
        if(res.status === 200 ){
          this.report = res.obj;
          this.livePicture = res.obj.livePicture;
        }else{
          this.$message({
            message:res.msg,  
            type:'warning',
          })
        }
      })
        .catch(error => {
          this.$message({
            message:'请求失败',  
            type:'warning',
          })
        })
    },
  },
  mounted(){
    this.caseResultDetail();
  }
}
</script>

<style scoped>
  .ld-wrap {
    width: 1200px;
    margin: 20px auto 30px auto;
    background: #fff;
    border-radius: 5px;
    padding-bottom: 30px;
  }
  .ld-one {
    padding: 30px;
    display: flex;
    align-items: center;
  }
  .ld-one-img {
    width: 250px;
    height: 250px;
  }
  .ld-one-txt {
    flex:1;
    margin-left: 50px;
    color: #333;
  }
  .ld-one-txt-title {
    font-size: 18px;
  }
  .ld-one-txt-time {
    font-size: 14px;
    margin-top: 20px;
  }
  .ld-one-txt-time span{
    margin-right:10px;
  }
  .ld-one-txt-platform {
    font-size: 14px;
    margin-top: 20px;
    display: flex;
    align-items: center;
  }
  .ld-one-txt-platform .icon {
    width: 16px;
    height: 16px;
    margin-left: 10px;
  }
  .ld-one-txt-name {
    font-size: 14px;
    margin-top: 20px;
  }
  .ld-two {
    padding: 0 30px 30px 30px;
    border-bottom: 1px solid #f4f4f4;
  }
  .ld-title {
    color: #333;
    font-size: 14px;
    position: relative;
    margin-left: 24px;
  }
  .ld-title::before {
    content: '';
    width: 3px;
    height: 16px;
    background: #0096e6;
    position: absolute;
    left: -24px;
    top: 0;
  }
  .ld-two-list {
    display: flex;
    margin: 30px 0 0 120px;
    align-items: center;
  }
  .ld-two-item {
    text-align: center;
    margin-right: 80px;
  }
  .ld-two-item-icon {
    width: 27px;
    height: 27px;
    margin: 0 auto;
  }
  .ld-item-txt {
    font-size: 14px;
    color: #666666;
    margin-top: 13px;
  }
  .ld-item-time {
    color: #333;
    font-size: 16px;
    margin-top: 10px;
  }
  .ld-three {
    padding: 30px;
    border-bottom: 1px solid #f4f4f4;
  }
  .ld-list {
    margin-top: 30px;
    margin-left: 120px;
  }
  .ld-list p {
    color: #333;
    font-size: 14px;
    line-height: 2;
  }
  .ld-four {
    padding: 30px;
    border-bottom: 1px solid #f4f4f4;
  }
  .ld-five {
    padding: 30px;
    border-bottom: 1px solid #f4f4f4;
  }
  .ld-six {
    padding: 30px;
  }
  .ld-img-list {
    display: flex;
    margin-top: 30px;
    margin-left: 120px;
    flex-wrap: wrap;
  }
  .ld-img-box {
    width: 173px;
    height: 316px;
    margin-right: 30px;
    margin-bottom: 30px;
  }
  .ld-img-box img{
    width:100%;
    height:100%;
  }
</style>
